// guide.js
import { Rule } from '../tips/rule'
import {
  CanvasButton
} from '../component/custombutton'
export class guide{
    constructor(canvas, width, height, continueCallback) {
        this.canvas = canvas;
        this.context = this.canvas.getContext('2d');
        this.width = width;
        this.height = height;
        this.continueCallback = continueCallback;
        this.size_1 = this.width / 12;
        this.size_2 = this.width / 30;
        this.size_3 = this.height / 10;
        this.percentage = 8 / 10;
        this.isAnimating = false;
        this.isPopupVisible = false;
        this.iconSize = this.width * (1 - this.percentage) / 1.5;

        this.init();
        // 将点击事件监听修改为抖音小游戏平台的方式
        wx.onTouchStart((event) => this.onClick(event));
    }

    init(){
        this.context.fillStyle = "rgba(0,0,0,0.5)";
        this.context.fillRect(0,0,this.width,this.height);
        this.firstDirective();
    }

    firstDirective(){
        let _this = this;
        this.context.fillStyle = 'rgba(0,0,0,0.5)';
        this.context.fillRect(0,0,this.width,this.height);
        this.context.fillStyle = 'rgba(255,0,0,0.7)';
        this.context.font = "bold 25px Arial";
        this.context.textAlign = 'center';
        this.context.fillText("快来学习一下游戏怎么玩吧！",this.width/2, this.height/2 );
        // ParamEllipse(this.context, this.width/2 + 150, this.imageY + 250, 50, 30); //椭圆
    // function ParamEllipse(context, x, y, a, b){
    //     //max是等于1除以长轴值a和b中的较大者
    //     //i每次循环增加1/max，表示度数的增加
    //     //这样可以使得每次循环所绘制的路径（弧线）接近1像素
    //     context.lineWidth = 5;
    //     context.strokeStyle = "rgb(255,0,0)";
    //     var step = (a > b) ? 1 / a : 1 / b;
    //     context.beginPath();
    //     context.moveTo(x + a, y); //从椭圆的左端点开始绘制
    //     for (var i = 0; i < 2 * Math.PI; i += step){
    //     //参数方程为x = a * cos(i), y = b * sin(i)，
    //     //参数为i，表示度数（弧度）
    //     context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
    //     }
    //     context.closePath();
    //     context.stroke();
    //     }
    // this.context.font = `italic ${this.size_1 / 2}px Arial`;
    // this.context.fillStyle = 'black';
    // this.context.textAlign = 'left';
    // this.context.fillText('玩法', this.iconSize * 3 / 4, this.iconSize * 5 / 3);
    this.playWay = {
      type: "image",
      image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/playWay.png",
      style: {
        backgroundColor: 'transparent',
        left: this.size_1,
        top: this.iconSize / 2,
        width: this.iconSize*2,
        height: this.iconSize*2,
      },
      success(button) {
        button.drawButton(_this.context); // 绘制按钮
        button.onTap((res) => {
          button.destroy();
          if (_this.isPopupVisible) return; // 如果有弹窗显示，忽略点击事件
          let rulePopup = new Rule(_this.canvas, _this.width, _this.height, () => {
            _this.isPopupVisible = false; // 弹窗关闭时重置标志
            _this.continueCallback();
          });
        })
      },
    };
    new CanvasButton(this.playWay);
    }
    
    onClick(event){
        const touchX = event.touches[0].clientX;
        const touchY = event.touches[0].clientY;

        if (touchX >= this.width / 2 + 100 && touchX <= this.width / 2 + 100 + this.imageWidth + 50 && touchY >= this.imageY + 200 && touchY <= this.imageY + 200 + this.imageHeight + 50) {
            // 禁用触摸事件
            wx.offTouchStart();
            let rulePopup = new Rule(this.canvas, this.width, this.height, this.continueCallback.bind(this));
            // if (typeof this.continueCallback === 'function') {
            //     this.continueCallback();
            //     console.log("guide :"+ 111);
            // }
        }
    }
}
